<template>
  <a-select style="width: 100%"
            v-model="slectValue"
            :placeholder="placeholder"
            :allowClear="allowClear"
            :showSearch="showSearch"
            :showArrow="showArrow"
            :size="size"
            :mode="mode"
            :notFoundContent="notFoundContent"
            :labelInValue="labelInValue"
            :disabled="disabled"
            @change="change"
            @blur="blur"
            @deselect="deselect"
            @focus="focus"
            @inputKeydown="inputKeydown"
            @dropdownVisibleChange="dropdownVisibleChange"
            @search="search"
            @popupScroll="popupScroll"
            @mouseenter="mouseenter"
            @mouseleave="mouseleave"
            @select="select">

    <a-select-option v-for="(option) in dataList"
                     :key="option.dictKey">{{ option.dictValue }}</a-select-option>
  </a-select>
</template>

<script>
import { getCode } from '../api/selector-dic'

export default {
  name: 'ZSelectDicCode',
  components: {},
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      required: false,
      default: '请选择',
      description: '默认提示'
    },
    mode: {
      type: String,
      required: false,
      default: 'default',
      description: '设置 Select 的模式为多选或标签'
    },

    allowClear: {
      type: Boolean,
      required: false,
      default: false,
      description: '是否可清空下拉框'
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
      description: '是否禁用'
    },

    showSearch: {
      type: Boolean,
      required: false,
      default: false,
      description: '是否可搜索'
    },
    showArrow: {
      type: Boolean,
      required: false,
      default: true,
      description: '是否显示小箭头'
    },
    labelInValue: {
      type: Boolean,
      required: false,
      default: false,
      description: '是否把每个选项的 label 包装到 value 中'
    },
    size: {
      type: String,
      required: false,
      default: 'default',
      description: '下拉框大小，默认为default large small'
    },
    notFoundContent: {
      type: String,
      required: false,
      default: '无数据',
      description: '当下拉列表为空时显示的内容'
    },
    param: {
      type: String,
      required: true,
      default: '',
      description: 'option数据源参数'
    }
  },
  data () {
    return {
      slectValue: '',
      dataList: []
    }
  },
  mounted () { },
  created () {
    if (this.value) this.slectValue = this.value
    this.initParam()
  },
  methods: {
    initParam () {
      getCode(this.param).then(res => {
        this.dataList = res
      })

      // this.data = { code: this.param }
    },
    /** value变化时调用 */
    change (val, option) {
      this.$emit('input', val)
      this.$emit('change', val, option)
    },
    /** 选中时调用 */
    select (val, option) {
      this.$emit('select', val, option)
    },
    /** 失去焦点的时回调 */
    blur (val) {
      this.$emit('blur', val)
    },
    /** 取消选中时调用 */
    deselect (val, option) {
      this.$emit('deselect', val, option)
    },
    /** 获得焦点时回调 */
    focus () {
      this.$emit('focus')
    },
    /** 键盘按下时回调 */
    inputKeydown (event) {
      this.$emit('inputKeydown', event)
    },
    /** 展开下拉菜单的回调 */
    dropdownVisibleChange (isopen, a) {
      this.$emit('dropdownVisibleChange', isopen)
    },
    /** 文本框值变化时回调 */
    search (val) {
      this.$emit('search', val)
    },
    /** 下拉列表滚动时的回调	 */
    popupScroll (event) {
      this.$emit('popupScroll', event)
    },
    /** 鼠标移入时回调 */
    mouseenter (event) {
      this.$emit('mouseenter', event)
    },
    /** 鼠标移出时回调 */
    mouseleave (event) {
      this.$emit('mouseleave', event)
    }
  }
}
</script>
